<html>
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

    <body>
        <div class="div_btn"><button id="btn" onclick="window.location.href='/'">返回首页</button></div>
        
        <hr/>
        <div class="divset">
            <div><h2>抽奖案例：</h2></div>
            <div style="color:blue;">set集合的应用</div>
            
            <div>加数据进入奖池:
                <div>key：
                    <input type="text" id="set_key" value="lucky" style="width:125px;height:30px;margin:5px;">
                    <span style="color:orange;font-size:small;">默认key值为lucky</span>
                </div>
                <div>value：
                    <input type="text" id="set_value" value="" style="width:350px;height:30px;margin:5px;">
                   <span style="color:red;font-size:small;">多个值之间用逗号隔开</span>
                </div>
                
            </div>
            <div style="margin:5px;"><button onclick="addval()">添加数据</button></div>
            
            
            <div>当前奖池中的元素：
                <div id="keys-container"></div> <!-- 添加一个容器来显示键 -->
            </div>
            
    
            <div><button onclick="getLucky()">抽奖</button></div>
            <div>本次获奖人物：
                <spin id="prize" style="color:red;"></spin>
            </div>         
        </div>
        
        <hr/>
        <div class="divset">
            <div><h2>排行榜案例：</h2></div>
            <div>zset集合的应用</div>
            <div>加数据进排行榜:
                <div>key：
                    <input type="text" id="zset_key" value="ranking" style="width:125px;height:30px;margin:5px;">
                    <span style="color:orange;font-size:small;">默认key值为ranking</span>
                </div>
                <div>value：
                    <input type="text" id="zset_value" value="" style="width:450px;height:30px;margin:5px;">
                   <span style="color:red;font-size:small;">输入格式：member=>score 多个值之间用逗号隔开</span>
                </div>
                
            </div>
            <div style="margin:5px;"><button onclick="addZval()">添加数据</button></div>           
            
            <div>排行榜显示前10排名数据：
                <div id="keys-rank"></div> <!-- 添加一个容器来显示键 -->
            </div>

            
        </div>
        
        
    </body>

   <script type="text/javascript">

        window.onload = function(){
            //加载时先获取redis中前20的key
            get_lucyKeys();
            
            //排行榜显示
            getZset();
        
            
        }
        //查询当前redis中前20的key
        function get_lucyKeys(){
            
            ajaxRequest('get_lucyKeys','get',null,function(data){
                if(data.code == 200){
                    displayKeys(data.data);
                }else{
                    displayKeys([]);
                }
            });
        }
         // 显示键的函数
         function displayKeys(keys) {
            var keysContainer = document.getElementById('keys-container');
            keysContainer.innerHTML = ''; // 清空容器

            if (keys.length > 0) {
                keys.forEach(function(key) {
                    var keyElement = document.createElement('div');
                    keyElement.textContent = key;
                                    
                    keysContainer.appendChild(keyElement);
                });
            } else {
                keysContainer.textContent = 'No keys found';
            }
        }
 
        // 添加数据
        function addval(){
            var set_key = document.getElementById("set_key").value;
            var set_value = document.getElementById("set_value").value;
            
            //以逗号间隔，将多个值分割成数组
            var values = set_value.split(',').filter(function(value) {
                return value.trim() !== ""; // 去除空值
            });
            var jsonval = JSON.stringify(values);
            //console.log(jsonval);
            ajaxRequest(
                'add_set',
                'post',
                {'key':set_key,'value':jsonval},
                function(data){
                    if(data.code == 200){
                        alert(data.msg);
                        get_lucyKeys();
                    }else{
                        alert(data.msg);
                    }
                });
          
        }
        
        //抽奖
        function getLucky(){
            ajaxRequest(
                'lucky_key',
                'get',
                null,
                function(data){
                    if(data.code == 200){
                        alert(data.data);
                        document.getElementById("prize").innerHTML = data.data;
                        get_lucyKeys();
                    }else{
                        alert(data.msg);
                    }
                }
            )
        }

        //---------------------------------------------------------------
        //排行榜
        function addZval(){
            var zset_key = document.getElementById("zset_key").value;
            var zset_value = document.getElementById("zset_value").value;
            if(zset_value == ''){
                alert('请输入数据');
                return;
            }
            if(zset_value.indexOf('=>') == -1){
                alert('请输入格式：score=>value 多个值之间用逗号隔开');
                return;
            }
            
            
            var zset_value = zset_value.split(',').filter(function(value) {
                return value.trim() !== ""; // 去除空值
            });

            var score_val = {};
            zset_value.forEach(function(val){
                var sval = val.split('=>');
                score_val[sval[0]]= sval[1];
            })
            console.log(score_val);
            ajaxRequest(
                'add_zset',
                'post',
                {'key':zset_key,'value':score_val},
                function(data){
                    if(data.code == 200){
                        alert(data.msg);
                        getZset();
                    }else{
                        alert(data.msg);
                    }
                }
            )
            
        }
        //查询排行榜前10数据
        function getZset(){
            var zset_key = document.getElementById("zset_key").value;
            zset_key = 'ranking'; //默认key
            ajaxRequest(
                'get_zset',
                'get',
                {'key':zset_key},
                function(data){
                    if(data.code == 200){
                        console.log(data.data);
                        var dd = {jack: 90, pony: 88, tom: 67, food: 30};
                        displayRank(data.data);
                    }else{
                        displayRank([]);
                    }
                }
            )
        }
        
        // 显示排行榜
        function displayRank(data) {
            var keysContainer = document.getElementById('keys-rank');
            keysContainer.innerHTML = ''; // 清空容器
         
            // 转换为对象数组
            var objArray = Object.entries(data).map(([key, value]) => ({ key, value }));
            

            if (objArray.length > 0) {
                objArray.forEach(function(obj) {
                    var keyElement = document.createElement('div');
                    keyElement.textContent = obj.key + '=>' + obj.value;
                                    
                    keysContainer.appendChild(keyElement);
                });
            } else {
                keysContainer.textContent = 'No keys data';
            }
        }
        
        //原生Ajax请求定义

        function ajaxRequest(url, method, data, callback) {  

            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            // 定义请求的类型、URL以及是否异步处理
            xhr.open(method, url, true);

            // 设置请求头，指定发送的数据类型为JSON
            xhr.setRequestHeader('Content-Type', 'application/json');
            //laravel框架需要设置csrf 防渗透验证
            var csr = document.getElementsByName('csrf-token')[0].getAttribute('content');
            xhr.setRequestHeader('X-CSRF-TOKEN', csr);

            // 定义请求完成后的回调函数
            xhr.onload = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    // 请求成功，处理返回的数据                        
                    callback(JSON.parse(xhr.responseText));
                    //console.log('Response:', xhr.responseText);
                } else {
                    // 请求失败，处理错误
                    console.error('Request failed with status:', xhr.status);
                }
            };

            // 定义请求出错时的回调函数
            xhr.onerror = function () {
                console.error('Request failed');
            };
            
            // 发送请求，将数据转换为JSON格式
            xhr.send(JSON.stringify(data));

        }
        
   </script> 
    <style>
        #keys-container {
            border: 1px solid #ccc; /* 设置边框 */
            height: 200px; /* 设置高度 */
            overflow-y: auto; /* 如果内容超出高度，显示滚动条 */
            padding: 10px; /* 设置内边距 */
        }
        #btn {
            position: absolute; /* 绝对定位 */
            right: 20px; /* 距离右侧 20px */
        }
        .div_btn{
            height: 35px;
        }
        
        #keys-rank {
            border: 1px solid #ccc; /* 设置边框 */
            height: 200px; /* 设置高度 */
            overflow-y: auto; /* 如果内容超出高度，显示滚动条 */
            padding: 10px; /* 设置内边距 */
        }
    </style>

</html>



